<template>
  <div>
    <a-card :bordered="false" destroyOnClose>
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button icon="plus" type="primary" @click="handleAdd">新增</a-button>
      </div>

      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>

        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
          :pagination="false"
          :rowSelection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          size="middle"
        >
          <template slot="stateSlots" slot-scope="text, record">
            <a-icon
              :style="{'color':record.state===1?'green':'red'}"
              :type="record.state===1?'check-circle':'close-circle'"
              theme="filled"/>
            {{ record.stateText }}
          </template>
          <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record.id)">查看</a>
          <a-divider type="vertical"/>
          <template v-if="record.state===0">
            <a @click="handleEdit(record.id)">编辑</a>
            <a-divider type="vertical"/>
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
            <a-divider type="vertical"/>
          </template>
          <a-popconfirm @confirm="setStatus(record)">
            <p slot="title">确定执行{{ record.state === 0 ? '启动' : '停止' }}操作吗?</p>
            <a>{{ record.state === 0 ? '启动' : '停止' }}</a>
          </a-popconfirm>
        </span>
        </a-table>
      </div>
      <DeviceAlarmConfigModal ref="modalForm" @ok="modalFormOk"></DeviceAlarmConfigModal>
    </a-card>
  </div>
</template>

<script>
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getAction} from '@api/manage'
import DeviceAlarmConfigModal from '../../../alarm/config/AlarmConfigModal.vue'
import JTreeSelect from '@comp/jeecg/JTreeSelect'

export default {
  name: 'AlarmConfigList',
  mixins: [JeecgListMixin],
  components: {
    DeviceAlarmConfigModal, JTreeSelect
  },
  props: {
    instanceId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // description: '设备实例管理页面',
      timer: null,
      modelSelect: '',
      modelOptions: [],
      loading: false,
      // 表头
      columns: [
        {
          title: '告警名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '实例名称',
          dataIndex: 'instanceName',
          key: 'instanceName'
        },
        {
          title: '触发方式',
          dataIndex: 'triggerMethodText',
          key: 'triggerMethod'
        },
        {
          title: '创建日期',
          dataIndex: 'createTime',
          key: 'createTime'
        },
        {
          title: '状态',
          dataIndex: 'stateText',
          scopedSlots: {customRender: 'stateSlots'}
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        listModel: '/device/model/listAll',
        list: '/alarm/config/list',
        delete: '/alarm/config/delete',
        deleteBatch: '/alarm/config/deleteBatch',
        setStatus: '/alarm/config/setStatus',
        refreshCache: '/alarm/config/refreshCache'
      },
      dictOptions: {}
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    changeInstanceId(instanceId) {
      this.list = '/alarm/config/list?instanceId=' + instanceId
      this.loadData()
    },
    refreshCache() {
      let that = this
      getAction(this.url.refreshCache, {}).then(res => {
        if (res.success) {
          that.$message.success('刷新缓存成功！')
        }
      })
    },
    loadData() {
      let scope = this
      getAction(this.url.list + '?instanceId=' + this.instanceId).then(res => {
        if (res.success) {
          scope.dataSource = res.result
        }
      })
    },
    handleAdd() {
      this.$refs.modalForm.title = '添加告警配置'
      this.$refs.modalForm.instanceIdDisable = true
      this.$refs.modalForm.add(this.instanceId)
    },
    handleEdit(record) {
      this.$refs.modalForm.title = '编辑告警配置'
      this.$refs.modalForm.instanceIdDisable = true
      this.$refs.modalForm.edit(record)
    },
    setStatus(record) {
      let scope = this
      getAction(`alarm/config/setState/${record.id}/${record.state === 1 ? 0 : 1}`).then(data => {
        if (data.success) {
          scope.$message.success(data.message)
          scope.loadData()
        } else {
          scope.$message.warning(data.message)
        }
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>